<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Media Element</title>
<script type="text/javascript">
	var mediaCtrl = {
		failed: function(e) {
			switch (e.target.error.code) {
				case e.target.error.MEDIA_ERR_ABORTED:
					alert('비디오 재생이 중단되었습니다.');
					break;
				case e.target.error.MEDIA_ERR_NETWORK:
					alert('네트워크 오류로 비디오 다운로드에 문제가 발생했습니다.');
					break;
				case e.target.error.MEDIA_ERR_DECODE:
					alert('동영상 파일에 문제가 있거나 브라우저에서 지원하지 않는 영상입니다.');
					break;
				case e.target.error.MEDIA_ERR_SRC_NOT_SUPPORTED:
					alert('서버의 응답 혹은 네트워크상태가 좋지 않거나 포맷이 지원되지 않기 때문에 동영상을 로드할 수 없습니다.');
					break;
				default:
					alert('알 수없는 오류가 발생했습니다.');
				break;
			}
		},
		go: function(videoElem, sec){
			videoElem.currentTime = videoElem.currentTime + sec;
		}
	}
	var pageCtrl = {
		before: function(){
			mediaCtrl.go(document.getElementById('videoElement'), -5);
		},
		next: function(){
			mediaCtrl.go(document.getElementById('videoElement'), 5);
		},
		play: function(src){
			var videoElem = document.getElementById('videoElement');
			
			if (videoElem.src) {
				videoElem.play();
			} else {
				alert('재생할 파일이 지정되지 않았습니다')
			}
		},
		playMP4: function() {
			var videoElem = document.getElementById('videoElement');
			videoElem.src = 'http://www.w3schools.com/html5/mov_bbb.mp4';
			videoElem.load();
		},
		playOGG: function() {
			var videoElem = document.getElementById('videoElement');
			videoElem.src = 'http://www.w3schools.com/html5/mov_bbb.ogg';
			videoElem.load();
		},
		stop: function(){
			var videoElem = document.getElementById('videoElement');
			videoElem.pause();
			videoElem.currentTime = 0;
		},
		pause: function(){
			document.getElementById('videoElement').pause();
		}
	}
</script>
</head>
<body>
	<h1>미디어 태그 활용하기</h1>
	<video id="videoElement" controls="controls" onerror="mediaCtrl.failed(event);"></video>
	<br />
	
	<button type="button" onclick="pageCtrl.playMP4();">MP4 파일로 설정</button>
	<button type="button" onclick="pageCtrl.playOGG();">OGG 파일로 설정</button>
	<br />
	
	<button type="button" onclick="pageCtrl.before();">5초 앞으로</button>
	<button type="button" onclick="pageCtrl.next();">5초 뒤로</button>
	<button type="button" onclick="pageCtrl.play();">재생</button>
	<button type="button" onclick="pageCtrl.pause();">일시정지</button>
	<button type="button" onclick="pageCtrl.stop();">정지</button>
</body>
</html>
